<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/principal.xhtml">

    <ui:define name="content" id="content">        
        <h1 class="title ui-widget-header ui-corner-all">Bem Vindo ao Cadastro de Bairros</h1>

        <h:form id="formBairro" prependId="false">
            <p:dataTable id="tabBairro" widgetVar="wtabBairro" var="bairro" value="#{bairroBean.lazyModel}" paginator="true" rows="10" lazy="true"
                         selection="#{bairroBean.selectedBairro}" selectionMode="single" rowSelectListener="#{bairroBean.onRowSelectBairro}"
                         onRowSelectComplete="bairroDialog.show()" onRowSelectUpdate="panel, displayBairro">

                <f:facet name="header">
                    Selecione uma linha e clique para Manutenção
                </f:facet>

                <p:column headerText="Descrição" sortBy="#{bairro.dscBairro}" filterBy="#{bairro.dscBairro}">
                    <h:outputText value="#{bairro.dscBairro}" />
                </p:column>

                <p:column headerText="Cidade" sortBy="#{bairro.codCidade.dscCidade}" filterBy="#{bairro.codCidade.dscCidade}">
                    <h:outputText value="#{bairro.codCidade.dscCidade}" />
                </p:column>

                <p:column headerText="U.F." sortBy="#{bairro.codCidade.codUf.codUf}" filterBy="#{bairro.codCidade.codUf.codUf}">
                    <h:outputText value="#{bairro.codCidade.codUf.codUf}" />
                </p:column>
            </p:dataTable>
            <p:dialog id="dialogBairro" header="Detalhes Bairro" widgetVar="bairroDialog" resizable="true"
                      width="600" showEffect="explode" hideEffect="explode">
                <p:panel id="panel">
                    <h:panelGrid id="displayBairro" columns="3" cellpadding="4">
                        <h:outputText value="" />
                        <p:messages />
                        <h:outputText value="" />


                        <h:outputText value="Código:" />
                        <p:inputText id="inCodigo" value="#{bairroBean.selectedBairro.codBairro}" required="true" readonly="true" style="width:100px; font-weight:bold"/>
                        <h:outputText value="" />

                        <h:outputText value="Descrição:" />
                        <p:inputText id="inDescricao" value="#{bairroBean.selectedBairro.dscBairro}" required="true" style="width:400px; font-weight:bold;" />
                        <h:outputText value="" />

                        <h:outputText value="Cidade:" />
                        <p:inputText id="inCidade" value="#{bairroBean.selectedBairro.codCidade.dscCidade}" readonly="true" style="width:400px; font-weight:bold;" />
                        <p:commandButton image="ui-icon ui-icon-search" title="Pesquisar" onclick="cidadeDialog.show()"/>  

                        <h:outputText value="U.F.:" />
                        <p:inputText id="inUf" value="#{bairroBean.selectedBairro.codCidade.codUf.codUf}" required="true" readonly="true" style="width:50px; font-weight:bold;" />
                        <h:outputText value="" />
                    </h:panelGrid>     
                    <p:commandButton value="Novo" image="ui-icon ui-icon-folder-open" title="Clique para Inserir um novo Bairro" 
                                     update="panel, display" action="#{bairroBean.novo}" oncomplete="bairroDialog.show()" />
                    <p:commandButton value="Inserir" update="messages,panel,tabBairro,displayBairro" 
                                     actionListener="#{bairroBean.inserir}" oncomplete="bairroDialog.hide()" rendered="#{!bairroBean.disable}" />
                    <p:commandButton value="Alterar" update="messages,panel,tabBairro,displayBairro"
                                     actionListener="#{bairroBean.alterar}" oncomplete="bairroDialog.hide()" rendered="#{bairroBean.disable}" />
                    <p:commandButton value="Excluir" onclick="confirmation.show()" type="button" rendered="#{bairroBean.disable}" />
                </p:panel>
            </p:dialog>

            <p:confirmDialog message="Confirma a Exclusão desse Bairro?"  
                             showEffect="bounce" hideEffect="explode"  
                             header="Exclusão do Bairro" severity="alert" widgetVar="confirmation">  

                <p:commandButton value="Sim" update="messages,panel,tabBairro,displayBairro" oncomplete="confirmation.hide(),cidadeDialog.hide(),bairroDialog.hide()"
                                 actionListener="#{bairroBean.excluir}" />  
                <p:commandButton value="Não" onclick="confirmation.hide()" type="button" />   

            </p:confirmDialog>

            <p:dialog id="dialogCidade" header="Pesquisa Cidade" widgetVar="cidadeDialog" resizable="true"
                      width="600" showEffect="explode" hideEffect="explode" position="'right',30">

                <p:dataTable id="tabCidade" widgetVar="wtabCidade" var="cidade" value="#{cidadeBean.lazyModel}" paginator="true" rows="5" lazy="true"
                             selection="#{cidadeBean.selectedCidade}" selectionMode="single"
                             onRowSelectComplete="cidadeDialog.hide()" rowSelectListener="#{bairroBean.onRowSelectNavigate}"
                             onRowSelectUpdate="messages,panel,tabBairro,displayBairro">

                    <f:facet name="header">
                        Pesquise e selecione uma linha
                    </f:facet>

                    <p:column headerText="Descrição" sortBy="#{cidade.dscCidade}" filterBy="#{cidade.dscCidade}">
                        <h:outputText value="#{cidade.dscCidade}" />
                    </p:column>

                    <p:column headerText="U.F." sortBy="#{cidade.codUf.codUf}" filterBy="#{cidade.codUf.codUf}">
                        <h:outputText value="#{cidade.codUf.codUf}" />
                    </p:column>
                </p:dataTable>
            </p:dialog>

        </h:form>
    </ui:define>
</ui:composition>